<template>
  <div>
    <vxe-table
      id="myCustomUpdate"
      class="sortable-column-demo"
      border
      :round="border"
      show-overflow
      keep-source
      ref="tableRef"
      @header-cell-dblclick="headerCellDblclickEvent"
      :height="tableHeight"
      :column-config="{ useKey: true, resizable: true }"
      :menu-config="{ body: { options: options } }"
      :edit-config="editConfig"
      :row-config="{ isCurrent: true, isHover: true }"
      :scroll-y="{ enabled: true, gt: 60 }"
      :customConfig="{
        storage: true,
        allowVisible: true,
        allowFixed: false,
        allowResizable: false,
        allowSort: false,
        updateStore({ id, storeData }) {
          // 模拟异步，实现服务端保存
          return saveCustomSetting(id, storeData);
        },
      }"
      @editClosed="editClosed"
      @cellClick="cellClick"
      @menuClick="menuClick"
      :data="data"
      :loading="loading"
    >
      <vxe-column
        v-for="(item, i) in columns"
        :key="i"
        :field="item.field"
        :type="item.type"
        :title="item.title"
        :edit-render="item.editRender"
        :width="item.width"
        :fixed="item.fixed && item.fixed !== '' ?item.fixed:''"
      >
        <template #default="{ row }">
          <!-- 人员编码里的字段 -->
          <span v-if="item.field == 'bmbm' || item.field == 'bm_cljfkj_mz' || item.field == 'ksbm'">{{
            bmbmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'bm_cljfkj_zy'">{{
            bm_cljfkj_zyDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'bmbm_1'">{{
            bmbm_1Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'rylb'">{{
            rybmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'bmbmbm'">{{
            bmbmbmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'ghlb'">{{
            ghlbDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'bqfl'">{{
            bqflDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'blzk'">{{
            blzkDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yke418'">{{
            yke418Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yke420'">{{
            yke420Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yke424'">{{
            yke424Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yke425'">{{
            yke425Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yke414'">{{
            yke414Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'medid'">{{
            medidDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'kffz'">{{
            kffzDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'xb'">{{
            row[item.field] == 1 ? "男" : "女"
          }}</span>
          <span
            v-else-if="
              item.field == 'yke423' ||
              item.field == 'sfty' ||
              item.field == 'ys_dmqx' ||
              item.field == 'sfyxgd' ||
              item.field == 'wx_sfxs' ||
              item.field == 'qybs' ||
              item.field == 'gh_sfxs'
            "
            >{{ row[item.field] == 1 ? "是" : "否" }}</span
          >
          <span v-else-if="item.field == 'czybz'">{{
            row[item.field] == 1 ? "操作员" : "非操作员"
          }}</span>
          <span v-else-if="item.field == 'zsxhxz'">{{
            row[item.field] == 0 ? "0" : row[item.field]
          }}</span>
          <span v-else-if="item.field == 'syzt'">
            <div class="syztzc" v-if="row[item.field] == 1">
              <img
                src="../../assets/images/zhengchang_icno.png"
                style="width: 12px; height: 12px; margin-right: 2px"
                alt=""
                srcset=""
              />
              <div>正常</div>
            </div>
            <div class="syztty" v-if="row[item.field] == 2">
              <img
                src="../../assets/images/tingyong_icon.png"
                style="width: 12px; height: 12px; margin-right: 2px"
                alt=""
                srcset=""
              />
              <div>停用</div>
            </div>
            <div class="syztsq" v-if="row[item.field] == 3">
              <img
                src="../../assets/images/shenqingzhong_icon.png"
                style="width: 12px; height: 12px; margin-right: 2px"
                alt=""
                srcset=""
              />
              <div>申请中</div>
            </div>
          </span>
          <span v-else-if="item.field == 'sftysyzt'">
            <div class="syztzc" v-if="row[item.field] == 0">
              <img
                src="../../assets/images/zhengchang_icno.png"
                style="width: 12px; height: 12px; margin-right: 2px"
                alt=""
                srcset=""
              />
              <div>在用</div>
            </div>
            <div class="syztty" v-if="row[item.field] == 1">
              <img
                src="../../assets/images/tingyong_icon.png"
                style="width: 12px; height: 12px; margin-right: 2px"
                alt=""
                srcset=""
              />
              <div>停用</div>
            </div>
          </span>
          <!-- 门特病种里的字段 -->
          <span v-else-if="item.field == 'bzlx'">{{
            bzlxDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yka441' || item.field == 'lb'">{{
            yka441Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 费用中类里的项目选择类别 -->
          <span v-else-if="item.field == 'xmxzlb' || item.field == 'hylx_id'">{{
            xmxzlbDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 药品类别里的药品大类 -->
          <span v-else-if="item.field == 'dl' || item.field == 'cfdylx'">{{
            ypdlDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 服药次数里的对应异地编码 -->
          <span v-else-if="item.field == 'yddy_bm'">{{
            yddy_bmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 服药次数里的国际编码 -->
          <span v-else-if="item.field == 'gb_bm' || item.field == 'ypdl'">{{
            gb_bmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 服药用法里的执行单标识 -->
          <span v-else-if="item.field == 'zxdbs'">{{
            zxdbsDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 服药用法里的对应银海给药途径 -->
          <span v-else-if="item.field == 'yke355'">{{
            yke355Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 计量单位里的医保剂量单位 -->
          <span v-else-if="item.field == 'yke351'">{{
            yke351Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 计量单位里的医保规格单位 -->
          <span v-else-if="item.field == 'aka075'">{{
            aka075Details(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 门诊类别里的就诊类型 -->
          <span v-else-if="item.field == 'jzlx'">{{
            jzlxDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 门诊类别里的就诊类型 -->
          <span v-else-if="item.field == 'bmbj' || item.field == 'bj'">{{
            bmbjDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 部门编码里的库房扣减科室西药 -->
          <span v-else-if="item.field == 'bm_qbjf'">{{
            bm_qbjfDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 部门编码里的库房扣减科室西药 -->
          <span v-else-if="item.field == 'bm_qbjf_zy'">{{
            bm_qbjf_zyDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'zxy_sf'">{{
            zxy_sfDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'ks_sba'">{{
            ks_sbaDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'sfgd'">{{
            sfgdDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'sf_mzclk'">{{
            sf_mzclkDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'zxbmbm_sfsy'">{{
            zxbmbm_sfsyDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'jnpt_bmbm'">{{
            jnpt_bmbmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'lcyxlxdm'">{{
            lcyxlxdmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'cffl_ks'">{{
            cffl_ksDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'cffl_ks_zy'">{{
            cffl_ks_zyDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'rybm' && item.selectOption">{{
            rybmsedDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'kdzxks' && item.selectOption">{{
            kdzxksDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'xdyy_pqqf' && item.selectOption">{{
            xdyy_pqqfDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'fzbm' && item.selectOption">{{
            fzbmDetails(row[item.field] ? row[item.field] : null)
          }}</span>
          <!-- 病案验证管理页面 -->
          <span v-else-if="item.field == 'yzdx' || item.field == 'ysbm' && item.selectOption">{{
            yzdxDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'bllx' || item.field == 'jzzt' && item.selectOption">{{
            bllxDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'glid' && item.selectOption">{{
            glidDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'gllb' && item.selectOption">{{
            gllbDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'glz_cl' && item.selectOption">{{
            glz_clDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'glz_kss' && item.selectOption">{{
            glz_kssDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'glz_yp' && item.selectOption">{{
            glz_ypDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'glz_zl' || item.field == 'pbms' && item.selectOption">{{
            glz_zlDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'yzlb' && item.selectOption">{{
            yzlbDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'ZYLX' && item.selectOption">{{
            ZYLXDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'zsbm' || item.field == 'workaddr' || item.field == 'zyd' && item.selectOption">{{
            zsbmDetails(row[item.field] || row[item.field] == 0 ? row[item.field] : null)
          }}</span>
          <span v-else-if="item.field == 'vxeActive'" class="table-btn">
            <span v-for="(its,i) in item.selectOption" @click="vxeActiveClick(its,row)" :key="i">
              <span class="table-detail" v-if="its == '详情'">
                {{ its }}
              </span>
              <span class="table-detele" v-else-if="its == '删除'">
                {{ its }}
              </span>
            </span>
          </span>
          <span v-else-if="row[item.field] === 0">{{ 0 }}</span>
          <span v-else-if="row[item.field] === ''">{{ '' }}</span>
          <span v-else>{{ row[item.field] ? row[item.field] : "" }}</span>
        </template>
        <template #edit="{ row }">
          <span v-if="item.selectName && item.selectName == 'selectTable'">
            <span v-if="item.field == 'glz_cl' && item.title == '材料关联值'" >
              <span v-if="row && row.gllb && row.gllb == '2'">
                <span
                  v-if="
                    item &&
                    item.selectOption &&
                    item.selectOption.fields &&
                    item.selectOption.data
                  "
                >
                  <selectTable
                    v-model:data="row[item.field]"
                    :fields="item.selectOption.fields"
                    :tableData="item.selectOption.data"
                    :objKey="item.selectOption.objKey"
                    :label="item.selectOption.label"
                    :border="true"
                    clearable
                    editable
                    @update="inputChange"
                  ></selectTable>
                </span>
              </span>
              <span v-else></span>
            </span>
            <span v-else-if="item.field == 'glz_kss' && item.title == '抗生素关联值'" >
              <span v-if="row && row.gllb && row.gllb == '3'">
                <span
                  v-if="
                    item &&
                    item.selectOption &&
                    item.selectOption.fields &&
                    item.selectOption.data
                  "
                >
                  <selectTable
                    v-model:data="row[item.field]"
                    :fields="item.selectOption.fields"
                    :tableData="item.selectOption.data"
                    :objKey="item.selectOption.objKey"
                    :label="item.selectOption.label"
                    :border="true"
                    clearable
                    editable
                    @update="inputChange"
                  ></selectTable>
                </span>
              </span>
              <span v-else></span>
            </span>
            <span v-else-if="item.field == 'glz_zl' && item.title == '诊疗关联值'" >
              <span v-if="row && row.gllb && row.gllb == '1'">
                <span
                  v-if="
                    item &&
                    item.selectOption &&
                    item.selectOption.fields &&
                    item.selectOption.data
                  "
                >
                  <selectTable
                    v-model:data="row[item.field]"
                    :fields="item.selectOption.fields"
                    :tableData="item.selectOption.data"
                    :objKey="item.selectOption.objKey"
                    :label="item.selectOption.label"
                    :border="true"
                    clearable
                    editable
                    @update="inputChange"
                  ></selectTable>
                </span>
              </span>
              <span v-else></span>
            </span>
            <span v-else-if="item.field == 'glz_yp' && item.title == '药品关联值'" >
              <span v-if="row && row.gllb == '0'">
                <span
                  v-if="
                    item &&
                    item.selectOption &&
                    item.selectOption.fields &&
                    item.selectOption.data
                  "
                >
                  <selectTable
                    v-model:data="row[item.field]"
                    :fields="item.selectOption.fields"
                    :tableData="item.selectOption.data"
                    :objKey="item.selectOption.objKey"
                    :label="item.selectOption.label"
                    :border="true"
                    clearable
                    editable
                    @update="inputChange"
                  ></selectTable>
                </span>
              </span>
              <span v-else></span>
            </span>
            <span v-else>
              <span
                v-if="
                  item &&
                  item.selectOption &&
                  item.selectOption.fields &&
                  item.selectOption.data
                "
              >
                <selectTable
                  v-model:data="row[item.field]"
                  :fields="item.selectOption.fields"
                  :tableData="item.selectOption.data"
                  :objKey="item.selectOption.objKey"
                  :label="item.selectOption.label"
                  :border="true"
                  clearable
                  editable
                  @update="inputChange"
                ></selectTable>
              </span>
            </span>
          </span>
          <span
            v-else-if="
              item.selectName && item.selectName == 'selectCheckedTable'
            "
          >
            <span
              v-if="
                item &&
                item.selectOption &&
                item.selectOption.fields &&
                item.selectOption.data
              "
            >
              <selectCheckedTable
                v-model:data="row[item.field]"
                :fields="item.selectOption.fields"
                :tableData="item.selectOption.data"
                objKey="itemid"
                label="itemid"
                :border="true"
                :alreadyOption="item.cardArr"
                :alreadyOptionKey="item.selectOption.feedbackKey"
                clearable
                @update="selectCheckedChange"
              ></selectCheckedTable>
            </span>
          </span>
          <span v-else-if="item.selectName && item.selectName == 'dataSelect'">
            <el-date-picker
              style="width: 140px"
              v-model="row[item.field]"
              type="date"
              placeholder="请选择"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </span>
          <span v-else-if="item.selectName && item.selectName == 'timeSelect'">
            <el-time-picker
              style="width: 140px"
              v-model="row[item.field]"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              placeholder="请选择">
            </el-time-picker>
          </span>
          <span v-else>
            <el-input
              v-if="item.type == 'number'"
              type="Number"
              v-model="row[item.field]"
            ></el-input>
            <el-input v-else v-model="row[item.field]"></el-input>
          </span>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script setup>
import Sortable from "sortablejs";
import selectTable from "@/components/selectTable/index.vue";
import selectCheckedTable from "@/components/selectCheckedTable/index.vue";
import {
  ref,
  onMounted,
  onUnmounted,
  reactive,
  onBeforeUnmount,
  watch,
  computed,
} from "vue";
import { VxeUI } from "vxe-table";
const tableRef = ref();
const bmbmArr = ref([]);
const rylbArr = ref([]);
const ghlbArr = ref([]);
const bqflArr = ref([]);
const blzkArr = ref([]);
const yke414Arr = ref([]);
const yke418Arr = ref([]);
const yke420Arr = ref([]);
const yke424Arr = ref([]);
const yke425Arr = ref([]);
const medidArr = ref([]);
const kffzArr = ref([]);
const bzlxArr = ref([]); //病种类别
const yka441Arr = ref([]); //付费方式
const xmxzlbArr = ref([]); //项目选择类别
const ypdlArr = ref([]); //药品大类
const yddy_bmArr = ref([]); //对应异地编码
const gb_bmArr = ref([]); //对应国际编码
const zxdbsArr = ref([]); //执行单标识
const yke355Arr = ref([]); //对应银海给药途径
const yke351Arr = ref([]); //对应医保剂量单位
const aka075Arr = ref([]); //对应医保规格单位
const jzlxArr = ref([]); //对应门诊类别里的就诊类型
const bmbjArr = ref([]); //部门标记
const bm_qbjfArr = ref([]); //库房扣减科室（西药）
const bm_qbjf_zyArr = ref([]); //库房扣减科室（中药）
const zxy_sfArr = ref([]); // 中西医病案
const ks_sbaArr = ref([]); //省病案
const sfgdArr = ref([]); //报表是否显示
const sf_mzclkArr = ref([]); //门诊材料扣减标志
const zxbmbm_sfsyArr = ref([]); //是否执行科室
const jnpt_bmbmArr = ref([]); //平台对照科室
const lcyxlxdmArr = ref([]); //临床医学类型
const cffl_ksArr = ref([]); //西医处方类型
const cffl_ks_zyArr = ref([]); //中医处方类型
const rybmArr = ref([]); //人员编码
const kdzxksArr = ref([]) //开单执行科室
const xdyy_pqqfArr = ref([]) //院区
const fzbmArr = ref([])//权限组
const yzdxArr = ref([])//验证对象
const bllxArr = ref([])//关联病历类型
const glidArr = ref([])//关联病历id
const gllbArr = ref([])//关联类别
const glz_kssArr = ref([])//抗生素关联值
const glz_clArr =ref([])//材料关联值
const glz_ypArr = ref([])//药品关联值
const glz_zlArr = ref([])//诊疗关联值
const yzlbArr = ref([])//关联验证类别
const ZYLXArr = ref([])//门诊住院类别
const zsbmArr = ref([])//诊室编码
const bm_cljfkj_zyArr = ref([])
const currentcolumn = ref();
const emit = defineEmits([
  "updataOptions",
  "updataSelect",
  "selectCheckedChange",
  "editData",
  "newData",
  "removeData",
  "updatacolumns",
  "clickTransferData",
  "vxeActiveClick"
]);
const props = defineProps({
  borders:{
    type: Boolean,
    default: true,
  },
  border:{
    type: Boolean,
    default: false,
  },
  // 是否点击传参
  clickTransfer: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  tableHeight: {
    type: Number,
    default: 0,
  },
  tableWidth: {
    type: Number,
    default: 0,
  },
  columnsData: {
    type: Array,
    default: [],
  },
  data: {
    type: Array,
    default: [],
  },
  options: {
    type: Array,
    default: [],
  },
  saveData: {
    type: Array,
    default: [],
  },
  custom: {
    type: Boolean,
    default: false,
  },
  editConfig:{
    type: Object,
    default:{trigger: 'click', mode: 'cell', showIcon: false}
  }
});
const columns = ref([]);
const gridData = [
  {
    date: "2016-05-02",
    name: "Jack",
    address: "New York City",
  },
  {
    date: "2016-05-04",
    name: "Jack",
    address: "New York City",
  },
  {
    date: "2016-05-01",
    name: "Jack",
    address: "New York City",
  },
  {
    date: "2016-05-03",
    name: "Jack",
    address: "New York City",
  },
];
const newvalue = ref("");
const fwksArr = ref([]);
const vxeActiveClick = (name,row)=>{
  emit("vxeActiveClick", name,row);
}
const inputChange = (val) => {
  emit("updataSelect", val, currentcolumn.value);
};

const bmbmDetails = (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bmbm" || v.field == 'bm_cljfkj_mz' || v.field == 'ksbm') {
          bmbmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bmbmArr.value.find((item) => item.bh === id);
    if (foundItem) {
      return foundItem.mc;
    } else {
      return "";
    }
  } else {
    return "";
  }
};
const bm_cljfkj_zyDetails = (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == 'bm_cljfkj_zy') {
          bm_cljfkj_zyArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bm_cljfkj_zyArr.value.find((item) => item.bh === id);
    if (foundItem) {
      return foundItem.mc;
    } else {
      return "";
    }
  } else {
    return "";
  }
};

const bmbm_1Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == 'bmbm_1') {
          bm_cljfkj_zyArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bm_cljfkj_zyArr.value.find((item) => item.bh === id);
    if (foundItem) {
      return foundItem.mc;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const rybmDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "rylb") {
          rylbArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = rylbArr.value.find((item) => item.value === id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const ghlbDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "ghlb") {
          ghlbArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = ghlbArr.value.find((item) => item.value === id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const bqflDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bqfl") {
          bqflArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bqflArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const blzkDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "blzk") {
          blzkArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = blzkArr.value.find((item) => item.dm == id);
    if (foundItem && foundItem.mc) {
      return foundItem.mc;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke418Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yke418") {
          yke418Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yke418Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke420Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yke420") {
          yke420Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yke420Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke424Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yke424") {
          yke424Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yke424Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke425Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yke425") {
          yke425Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yke425Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke414Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yke414") {
          yke414Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yke414Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const medidDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "medid") {
          medidArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = medidArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const kffzDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "kffz") {
          kffzArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = kffzArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const bzlxDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bzlx") {
          bzlxArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bzlxArr.value.find((item) => item.dm == id);
    if (foundItem && foundItem.mc) {
      return foundItem.mc;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yka441Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yka441" || v.field == "lb") {
          yka441Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yka441Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const xmxzlbDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "xmxzlb" || v.field == 'hylx_id') {
          xmxzlbArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = xmxzlbArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const ypdlDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "dl" || v.field == "cfdylx") {
          ypdlArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = ypdlArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yddy_bmDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yddy_bm") {
          yddy_bmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yddy_bmArr.value.find((item) => item.aaa102 == id);
    if (foundItem && foundItem.aaa103) {
      return foundItem.aaa103;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const gb_bmDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "gb_bm" || v.field == "ypdl") {
          gb_bmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = gb_bmArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const zxdbsDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "zxdbs") {
          zxdbsArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = zxdbsArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke351Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yke351") {
          yke351Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yke351Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const aka075Details = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "aka075") {
          aka075Arr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = aka075Arr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const jzlxDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "jzlx") {
          jzlxArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = jzlxArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const bmbjDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bmbj" || v.field == "bj") {
          bmbjArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bmbjArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const bm_qbjfDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bm_qbjf") {
          bm_qbjfArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bm_qbjfArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const bm_qbjf_zyDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bm_qbjf_zy") {
          bm_qbjf_zyArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bm_qbjf_zyArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const zxy_sfDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "zxy_sf") {
          zxy_sfArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = zxy_sfArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const ks_sbaDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "ks_sba") {
          ks_sbaArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = ks_sbaArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const sfgdDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "sfgd") {
          sfgdArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = sfgdArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const sf_mzclkDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "sf_mzclk") {
          sf_mzclkArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = sf_mzclkArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const zxbmbm_sfsyDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "zxbmbm_sfsy") {
          zxbmbm_sfsyArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = zxbmbm_sfsyArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const jnpt_bmbmDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "jnpt_bmbm") {
          jnpt_bmbmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = jnpt_bmbmArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const lcyxlxdmDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "lcyxlxdm") {
          lcyxlxdmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = lcyxlxdmArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const cffl_ksDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "cffl_ks") {
          cffl_ksArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = cffl_ksArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const cffl_ks_zyDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "cffl_ks_zy") {
          cffl_ks_zyArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = cffl_ks_zyArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const rybmsedDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "rybm") {
          rybmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = rybmArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const kdzxksDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "kdzxks") {
          kdzxksArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = kdzxksArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const xdyy_pqqfDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "xdyy_pqqf") {
          xdyy_pqqfArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = xdyy_pqqfArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const fzbmDetails = computed(() => (id) => {
  if (id) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "fzbm") {
          fzbmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = fzbmArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yzdxDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yzdx" || v.field == 'ysbm') {
          yzdxArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yzdxArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const bllxDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "bllx" || v.field == 'jzzt') {
          bllxArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = bllxArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const glidDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "glid") {
          glidArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = glidArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const gllbDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "gllb") {
          gllbArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = gllbArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const glz_kssDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "glz_kss") {
          glz_kssArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = glz_kssArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const glz_ypDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "glz_yp") {
          glz_ypArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = glz_ypArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const glz_zlDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "glz_zl" || v.field == 'pbms') {
          glz_zlArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = glz_zlArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yzlbDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "yzlb") {
          yzlbArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = yzlbArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const ZYLXDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "ZYLX") {
          ZYLXArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = ZYLXArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const zsbmDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "zsbm" || v.field == 'workaddr' || v.field == 'zyd') {
          zsbmArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = zsbmArr.value.find((item) => item.bh == id);
    if (foundItem && foundItem.mc) {
      return foundItem.mc;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const glz_clDetails = computed(() => (id) => {
  if (id || id == 0) {
    if (props.columnsData && props.columnsData.length > 1) {
      props.columnsData.forEach((v) => {
        if (v.field == "glz_cl") {
          glz_clArr.value = v.selectOption.data;
        }
      });
    }
    const foundItem = glz_clArr.value.find((item) => item.value == id);
    if (foundItem && foundItem.label) {
      return foundItem.label;
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const yke355Details = computed(() => (id) => {
  if (id) {
    // if(props.columnsData && props.columnsData.length>1){
    //   props.columnsData.forEach(v=>{
    //     if(v.field == 'yke355'){
    //       yke355Arr.value = v.selectOption.data
    //     }
    //   })
    // }
    // const foundItem = yke355Arr.value.find(item => item.Key == id);
    // if(foundItem && foundItem.Value){
    //   return foundItem.Value;
    // }else{
    return "";
    // }
  } else {
    return "";
  }
});

const bmbmbmDetails = computed(() => (id) => {
  if (id) {
    let arr = id.split(",");
    let result = [];
    let resultStr = [];
    arr.forEach((v) => {
      bmbmArr.value.forEach((item) => {
        if (v == item.bh) {
          result.push(item);
        }
      });
    });
    result.forEach((v) => {
      resultStr.push(v.mc);
    });
    if (resultStr.length > 0) {
      return resultStr.join(",");
    } else {
      return "";
    }
  } else {
    return "";
  }
});

const selectCheckedChange = (val) => {
  emit("selectCheckedChange", val, currentcolumn.value);
};
const formatSexLabel = (sexList) => {
  if (sexList) {
    return sexList
      .map((sex) => {
        const item = props.selectOptions.find((item) => item.value === sex);
        return item ? item.label : sex;
      })
      .join(",");
  }
  return "";
};
// 新增表格的方法
const addData = async () => {
  const $table = tableRef.value;
  if ($table) {
    const { row: newRow } = await $table.insertAt();
    await $table.setEditCell(newRow, "name");
  }
};
// 获取新增的数据
const getnewData = () => {
  const $table = tableRef.value;
  if ($table) {
    // 这是获取到的编辑的数据
    const insertRecords = $table.getInsertRecords();
    return insertRecords;
    // emit('newData',insertRecords)
  }
};
// 获取修改的数据
const getEditData = () => {
  const $table = tableRef.value;
  if ($table) {
    // 这是获取到的编辑的数据
    const updateRecords = $table.getUpdateRecords();
    return updateRecords;
  }
};
// 获取删除的数据
const removeTable = () => {
  const $table = tableRef.value;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    return selectRecords;
  }
};
// 表格滚动到对应位置
const tableScrollTo = ()=>{
  console.log('执行到这了吗？');
  tableRef.value.scrollToBottom();
}
const editClosed = (row, rowIndex, data) => {
  // console.log(`单击行：`,row,rowIndex,data)
};

const cellClick = (column) => {
  console.log(column);
  currentcolumn.value = column;
  if (props.clickTransfer) {
    emit("clickTransferData", column);
  }
};
const menuClick = (menu, row, column) => {
  emit("updataOptions", menu);
};

const headerCellDblclickEvent = ({ column }) => {
  console.log(`表头单元格点击${column.title}`);
};

// 获取高亮行
const getCurrentEvent = () => {
  const $table = tableRef.value;
  if ($table) {
    const gaoliangdata = $table.getCurrentRecord();
    return gaoliangdata;
  }
};

// 下面的是自定义的东西
const sortables = ref("");
const sortablesChild = ref("");
const footerMethods = ref([[]]);
const saveCustomSetting = (id, storeData) => {
  console.log(storeData);
  if (storeData.resizableData) {
    for (let key in storeData.resizableData) {
      columns.value.forEach((item) => {
        if (item.field == key) {
          if (item.children && item.children.length > 0) {
            item.children.forEach((it) => {
              if (it.field == key) {
                it.width = storeData.resizableData[key];
              }
            });
          } else {
            item.width = storeData.resizableData[key];
          }
        } else {
          if (item && item.children) {
            item.children.forEach((it) => {
              console.log("进来了嘛");
              if (it.field == key) {
                it.width = storeData.resizableData[key];
              }
            });
          }
        }
      });
    }
    columnDrop();
  }
  if (storeData.visibleData) {
    console.log(storeData);
    for (let key in storeData.visibleData) {
      columns.value.forEach((item) => {
        if (item.field == key) {
          if (item.children && item.children.length > 0) {
            item.children.forEach((it) => {
              if (it.field == key) {
                it.visible = storeData.visibleData[key];
              }
            });
          } else {
            item.visible = storeData.visibleData[key];
          }
        } else {
          if (item && item.children) {
            item.children.forEach((it) => {
              if (it.field == key) {
                it.visible = storeData.visibleData[key];
              }
            });
          }
        }
      });
    }
  }
  console.log(JSON.stringify(columns.value));
};
// 根据保存的数据刷新列表
const saveLodings = () => {
  console.log("加载", props.saveData);
  let saveDataCopy = props.saveData;
  columns.value.forEach((item) => {
    if (hasStringInArrayObjects(saveDataCopy, item.field)) {
      saveDataCopy.forEach((it, j) => {
        if (item.field == it.field) {
          if (
            item.children &&
            item.children.length > 0 &&
            it.children &&
            it.children.length > 0
          ) {
            item.children.forEach((element) => {
              if (
                !saveDataCopy[j].children.some((datas) =>
                  datas.field.includes(element.field)
                )
              ) {
                saveDataCopy[j].children.push(element);
              } else {
                it.children.forEach((ele, h) => {
                  if (element.field == ele.field) {
                    let width = ele.width;
                    let visible = ele.visible;
                    saveDataCopy[j].children[h] = element;
                    // ele = element
                    ele.width = width;
                    ele.visible = visible;
                  }
                });
              }
            });
          } else {
            let width = it.width;
            let visible = it.visible;
            saveDataCopy[j] = item;
            // it = item
            it.width = width;
            it.visible = visible;
          }
        }
      });
    } else {
      saveDataCopy.push(item);
    }
  });
  console.log(saveDataCopy);
};
function hasStringInArrayObjects(arr, str) {
  return arr.some((obj) =>
    Object.values(obj).some(
      (value) => typeof value === "string" && value.includes(str)
    )
  );
}
// 拖拽后的变动
const dragCustomSetting = (oldIndex, newIndex) => {
  // 获取要移动的元素
  const element = columns.value.splice(oldIndex, 1)[0];
  // 在目标索引位置插入元素
  columns.value.splice(newIndex, 0, element);
  console.log("执行到这了嘛？", columns.value);
  emit("updatacolumns", columns.value);
};
const dragCustomSettingChild = (oldIndex, newIndex) => {
  let childrenArr = [];
  columns.value.forEach((v) => {
    if (v.children) {
      v.children.forEach((item) => {
        childrenArr.push(item);
      });
    }
  });
  let oldData = childrenArr[oldIndex];
  let newData = childrenArr[newIndex];
  let element = null;
  let newIndexs = null;
  let columnsIndex = null;
  columns.value.forEach((v, i) => {
    if (v.children && v.children.length > 0) {
      if (
        v.children.some((obj) => Object.values(obj).includes(newData.field))
      ) {
        for (let j = 0; j < v.children.length; j++) {
          if (v.children[j].title == newData.title) {
            newIndexs = j;
          }
        }
      }
    }
  });
  columns.value.forEach((v, i) => {
    if (v.children && v.children.length > 0) {
      if (
        v.children.some((obj) => Object.values(obj).includes(oldData.field))
      ) {
        for (let k = 0; k < v.children.length; k++) {
          if (v.children[k].field == oldData.field) {
            // 获取要移动的元素
            element = columns.value[i].children.splice(k, 1)[0];
          }
          columnsIndex = i;
        }
      }
    }
  });
  columns.value[columnsIndex].children.splice(newIndexs, 0, element);
  emit("updatacolumns", columns.value);
};
const columnDrop = () => {
  nextTick(() => {
    const $table = tableRef.value;
    sortables.value = Sortable.create(
      $table.$el.querySelector(
        ".body--wrapper>.vxe-table--header .vxe-header--row"
      ),
      {
        animation: 180,
        delay: 0,
        // handle: '.vxe-header--column',
        onEnd: ({ item, newIndex, oldIndex }) => {
          dragCustomSetting(oldIndex, newIndex);
          $table.loadColumn(columns.value);
        },
      }
    );
  });
};

const columnDropChild = () => {
  setTimeout(() => {
    const $table = tableRef.value;
    sortablesChild.value = Sortable.create(
      $table.$el.querySelector(
        ".body--wrapper>.vxe-table--header thead tr:last-child"
      ),
      {
        animation: 180,
        delay: 0,
        // handle: '.vxe-header--column',
        onEnd: ({ item, newIndex, oldIndex }) => {
          dragCustomSettingChild(oldIndex, newIndex);
          // $table.loadColumn(columns.value)
        },
      }
    );
  }, 500);
};

onMounted(() => {
  columns.value = props.columnsData;
  if (props.custom) {
    columnDrop();
    let columnsed = columns.value;
    if (columnsed.some((item) => item.hasOwnProperty("children"))) {
      columnDropChild();
    }
    if (props.saveData && props.saveData.length > 0) {
      saveLodings();
    }
  }
});
onBeforeUnmount(() => {
  if (sortables.value) {
    sortables.value.destroy();
  }
  if (sortablesChild.value) {
    sortablesChild.value.destroy();
  }
});
defineExpose({
  addData,
  getnewData,
  getEditData,
  removeTable,
  tableScrollTo,
  getCurrentEvent,
});
</script>
<style lang="scss" scoped>
.table-btn{
  // padding: 10px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .table-detail{
    font-weight: 400;
    font-size: 14px;
    color: #359DE1;
    cursor: pointer;
  }
  .table-detele{
    font-weight: 400;
    font-size: 14px;
    color: #EB4015;
    cursor: pointer;
  }
}
.syztzc,
.syztty,
.syztsq {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 4px 4px 4px 4px;
}
.syztzc {
  background: rgba(52, 132, 252, 0.1);
  color: #3484fc;
  width: 62px;
}
.syztty {
  background: rgba(235, 64, 21, 0.1);
  color: #eb4015;
  width: 62px;
}
.syztsq {
  background: rgba(255, 151, 0, 0.1);
  color: #eb4015;
  width: 76px;
}
</style>